<template>
  <el-button
      class="button"
      type="text"
      v-if="!isLogin"
      @click="openDialog"
  >
    登录/注册
  </el-button>

  <el-button
      class="button"
      type="text"
      @click="openMassage"
      v-if="isLogin&&!dialogFormVisible"

  >
    {{ yonghu.nickname }}
  </el-button>

  <el-drawer class="drawer" v-model="drawer" :with-header="false">
    <el-text size="large" class="pp">个人信息</el-text>
    <el-divider border-style="dashed" />
    <div clas="massage">
      <el-text>用户名：{{yonghu.nickname}}</el-text><br/>
      <el-text>性别：{{yonghu.gender}}</el-text><br/>
      <el-text>手机号：{{yonghu.phone}}</el-text><br/>
      <el-text>出生日期：{{yonghu.birthday}}</el-text><br/>
      <!--      <el-button class="updateBut" type="primary">修改</el-button>-->
      <el-button class="updateBut" type="primary" @click="tuichu">退出</el-button>
    </div>
    <el-divider/>
    <el-text size="large" class="pp">我的订单</el-text>
    <el-divider border-style="dashed" />
    <ul class="cookList">
      <li class="li1" v-for="(item,index) in order_list">
        <div class="massage-top">
          <el-text size="large">订单编号：{{ item.oid }}</el-text>
          <el-tag class="ml" type="success" v-if="item.statu===1">已完成</el-tag>
          <el-tag class="ml" type="danger" v-else>正在制作</el-tag>
        </div>
        <el-divider/>
        <el-text type="info" class="textLi" v-for="(item1) in order_list[index].prodectName">
          {{ item1.name }}；
          {{ iceList[item1.ice].label }}；
          {{ sugarList[item1.sugar].label }}；
          数量：{{ item1.num }}；
          <span>￥{{ item1.price }}元</span>
          <br>
        </el-text>
        <el-text type="info" class="textBottom">
          共{{ item.totalnum }}杯，实付￥{{ item.total }}
        </el-text><br><br>
        <!--        <el-button class="addBut"  type="primary" @click="add(item)">再来一单</el-button>-->
      </li>
    </ul>
  </el-drawer>


  <el-dialog v-model="dialogFormVisible" title="登录/注册" class="dialogItem" width="600px" center>
    <el-form :model="form" class="formItem">
      <el-form-item label="手机号" :label-width="60">
        <el-input v-model="form.name" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="密码" :label-width="60">
        <el-input type="password" v-model="form.password" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="loginBut">
          登录/注册
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const drawer = ref(false)
const dialogFormVisible = ref(false)
const isLogin = ref(false)
const iceList = [
  {label: "常温", value: 0},
  {label: "冰", value: 1},
  {label: "热", value: 2}
]
const sugarList = [
  {label: "正常", value: 0},
  {label: "七分", value: 1},
  {label: "五分", value: 2},
  {label: "三分", value: 3},
  {label: "无糖", value: 4}
]

const form = ref({
  name: '',
  password: ''
})
const yonghu = ref({})
const order_list = ref([])


onMounted(() => {
  // localStorage.removeItem("access-customer")
  if(window.localStorage.getItem("access-customer")!=null){
    isLogin.value = true;
    yonghu.value = JSON.parse(window.localStorage.getItem("access-customer")).customer
  }
})

const openDialog = () => {
  dialogFormVisible.value = true
  form.value.name = ''
  form.value.password = ''
}

//登录
const loginBut = () => {
  if(form.value.name!==''&&form.value.password!=='') {
    axios.get('http://192.168.166.182:8080/customer/login', {
      params: {
        phone: form.value.name,
        password: form.value.password
      }
    })
        .then(res => {
          console.log(res.data)
          console.log(JSON.stringify(res.data))
          localStorage.setItem('access-customer', JSON.stringify(res.data))
          let is = res.data.is
          if (is === 0) {
            ElMessage({
              message: '注册成功',
              type: 'success',
            })
            isLogin.value = true
          } else if (is === 1) {
            ElMessage({
              message: '登录成功',
              type: 'success',
            })
            isLogin.value = true
          } else {
            ElMessage.error('密码错误')
            form.value.password = ''
          }
          if(isLogin.value){
            dialogFormVisible.value = false

            yonghu.value = JSON.parse(window.localStorage.getItem("access-customer")).customer
            console.log(yonghu)
          }
        })
        .catch(error => {
          console.error(error);
        })
  }
}
//
// const add = (item) => {
//   emits('my-event1', item)//触发组件自定义事件，并传递数据
// }

const openMassage = () => {
  axios.get('http://192.168.166.182:8080/orderForm/orderByCid', {
    params: {
      cid:yonghu.value.cid
    }
  })
      .then(res =>{
        console.log(res.data)
        order_list.value = res.data
        console.log(order_list)
        drawer.value = true
      })
      .catch(error => {
        console.error(error);
      })
}


const tuichu = () => {
  window.localStorage.removeItem('access-customer')
  isLogin.value = false;
  dialogFormVisible.value = false;
}

</script>

<style scoped>
.button {
  color: white;
  margin: 10px 0 0 1300px;
  font-size: 16px;
  font-weight: bold;
}

.formItem {
  width: 300px;
  margin-left: 90px;
  margin-top: 30px;
}

.drawer{
  --el-drawer-bg-color: #fdf6ec;
}

.massage-top {
  margin: 20px 0 0 20px;
}

.pp{
  /*margin-left: 10px;*/
  /*--el-text-font-size: 18px;*/
}

.ml{
  float: right;
  margin-right: 20px;
}

.li1 {
  width: 100%;
  /*position: center;*/
  list-style: none;
  border: 1px solid #e5e9f2;
  overflow: hidden;
  background-color: #fff;
  margin: 1%;
  border-radius: 5px;
  /*display: flex;*/
  /*flex-direction: row;*/
  /*justify-content: flex-start;*/
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.textLi{
  width: 90%;
  padding-left: 10px;
}

.textBottom{
  float: right;
  padding: 10px 20px 10px 0;
}

.addBut{
  float: right;
  margin: 0 20px 10px 0;
}
.updateBut{
  /*float: right;*/
  margin: 20px 0 0 20px;
}

</style>
